<template>
  <section class="content">
    <div class="money">
      <div class="leftLogo">
        <img v-if="props.active === 'new'" src="http://wxpro.xlmediawatch.com/img/inews促销活动/元素/红包白底图标.png" alt="">
        <img v-else src="http://wxpro.xlmediawatch.com/img/inews促销活动/元素/感叹号白底图标.png" alt="">
      </div>
      <div class="rightContent">
        <p v-if="props.active === 'new'">现金券已经发送到您的账户<br>您可以复制以下链接登录PC端查看</p>
        <p v-else-if="props.active === 'old'">当前活动仅限于新用户注册，年末续费优惠方案请资讯相应的客户经理，联系电话：陈经理13681186870或010-51295500-855</p>
        <p v-else>抱歉！当前活动结束。</p>
      </div>
    </div>
    <div class="url">
      <div v-if="props.active !== 'new'">
        <img class="noActive" src="http://wxpro.xlmediawatch.com/img/inews促销活动/元素/暂无优惠券.png" alt="">
      </div>
      <div v-else>
        <div class="copyArea">
          <div class="input">
            <div>
              <span>
              {{data.url}}
            </span>
            </div>
            <button @click="copy">
              点击复制
            </button>
          </div>
          <div>
            <p class="useDes" @click="useDes">
              <el-icon style="font-size: 14px;margin-right: 2px">
                <QuestionFilled />
              </el-icon>
              现金折扣券使用说明
            </p>
          </div>
        </div>
        <div class="logo">
          <header>
            会员专属特权
          </header>
          <div class="logoArea">
            <div class="everyLogo" v-for="item in logoList">
              <div>
                <div class="top">
                  <img :src="item.logo" alt="">
                </div>
                <div class="bottom">
                  <span class="logoName">{{item.name}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <el-drawer
      v-model="drawer"
      title="隐私协议"
      :direction="direction"
      :with-header="false"
      :size="'90vh'"
  >
    <div>
      <header style="text-align: center;font-weight: 700">活动规则</header>
      <p style="font-size: 12px" v-html="text.termsOfUse"></p>
    </div>
  </el-drawer>
</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import {
  QuestionFilled
} from '@element-plus/icons-vue'
import {textObj} from "../../../../../assets/text";

const data = reactive({
  url:ref<string>('http://inews5.xlmediawatch.com')
})


const props = defineProps({
  //子组件接收父组件传递过来的值
  active: String,
})

const drawer = ref(false)
// 抽屉方向
const direction = ref('btt')


const text:object = textObj

const logoList:Array<object> = [
  {
    name:'海量数据',
    logo:'http://wxpro.xlmediawatch.com/img/inews促销活动/元素/PC端/会员权益/1.png'
  },
  {
    name:'知识画像',
    logo:'http://wxpro.xlmediawatch.com/img/inews促销活动/元素/PC端/会员权益/2.png'
  },
  {
    name:'全网渠道',
    logo:'http://wxpro.xlmediawatch.com/img/inews促销活动/元素/PC端/会员权益/3.png'
  },
  {
    name:'内容挖掘',
    logo:'http://wxpro.xlmediawatch.com/img/inews促销活动/元素/PC端/会员权益/4.png'
  },
  {
    name:'专业服务',
    logo:'http://wxpro.xlmediawatch.com/img/inews促销活动/元素/PC端/会员权益/5.png'
  },
  {
    name:'热榜搜索',
    logo:'http://wxpro.xlmediawatch.com/img/inews促销活动/元素/PC端/会员权益/6.png'
  },
  {
    name:'媒体监测',
    logo:'http://wxpro.xlmediawatch.com/img/inews促销活动/元素/PC端/会员权益/7.png'
  },
  {
    name:'舆情监测',
    logo:'http://wxpro.xlmediawatch.com/img/inews促销活动/元素/PC端/会员权益/8.png'
  },
  {
    name:'危机管理',
    logo:'http://wxpro.xlmediawatch.com/img/inews促销活动/元素/PC端/会员权益/9.png'
  },
  {
    name:'深度报告',
    logo:'http://wxpro.xlmediawatch.com/img/inews促销活动/元素/PC端/会员权益/10.png'
  },
  {
    name:'智慧大屏',
    logo:'http://wxpro.xlmediawatch.com/img/inews促销活动/元素/PC端/会员权益/11.png'
  },
  {
    name:'媒体管家',
    logo:'http://wxpro.xlmediawatch.com/img/inews促销活动/元素/PC端/会员权益/12.png'
  },
  {
    name:'语言识别',
    logo:'http://wxpro.xlmediawatch.com/img/inews促销活动/元素/PC端/会员权益/13.png'
  },
  {
    name:'图文识别',
    logo:'http://wxpro.xlmediawatch.com/img/inews促销活动/元素/PC端/会员权益/14.png'
  },
  {
    name:'视频分析',
    logo:'http://wxpro.xlmediawatch.com/img/inews促销活动/元素/PC端/会员权益/15.png'
  },
]

/**
 * 使用说明
 */
const useDes = () => {
  drawer.value = true
}

/**
 * 复制
 */
const copy = () => {
  console.log('copy')
  try {
    let value = data.url
    let input = document.createElement('textarea')
    //将input的值设置为需要复制的内容
    input.value = value;
    //添加input标签
    document.body.appendChild(input)
    //选中input标签
    input.select()
    //执行复制
    document.execCommand('copy')
    //移除input标签
    document.body.removeChild(input)
    ElMessage.success("复制成功");
  } catch (e) {
    ElMessage.error("复制失败");
  }
}
</script>

<style scoped lang="scss">
.content{
  margin-top: 10px;
  background: #b10a1b;
  border-radius: 14px;
  //position: relative;
  overflow: hidden;
  .url{
    width: 100%;
    border-radius: 14px;
    background: #f5f5f5;
    //padding-top: 40px;
    overflow: hidden;
    box-sizing: border-box;
    >div{
      .noActive{
        width: 100%;
      }
      .copyArea{
        margin: 36px auto;
        width: 90%;
        height: 34px;
        border: 1px solid #dfdfdf;
        border-radius: 6px;
        line-height: 34px;
        .input{
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 20px;
          div{
            flex-grow: 1;
            span{
              color: #c90c01;
              font-size: 12px;
            }
          }

          button{
            cursor: pointer;
            flex-shrink: 0;
            width: 76px;
            height: 20px;
            background: #c90c01;
            color: white;
            font-size: 12px;
            outline: none;
            border: none;
            padding: 2px 14px;
            border-radius: 5px;
          }
        }
        .useDes{
          display: flex;
          justify-content: right;
          align-items: center;
          margin: 6px 0 0 0;
          color: #282828;
          font-size: 12px;
        }

      }
      .logo{
        margin-top: 50px;
        width: 100%;
        border-radius: 14px;
        background: #b10a1b;
        padding: 20px 20px 40px 20px;
        box-sizing: border-box;
        >header{
          color: white;
          font-size: 15px;
        }
        .logoArea{
          margin-top: 22px;
          display: flex;
          flex-wrap: wrap;
          justify-content: left;
          .everyLogo{
            width: 20%;
            display: flex;
            margin-bottom: 8px;
            justify-content: center;
            >div{
              width: 60px;
              img{
                width: 100%;
              }
              .bottom{
                text-align: center;
                .logoName{
                  font-size: 12px;
                  color: white;
                }
              }
            }
          }
        }
      }
    }

  }
  .money{
    width: 100%;
    height: 70px;
    display: flex;
    .leftLogo{
      flex-shrink: 0;
      padding-left: 2vw;
      width: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      >img{
        width: 36px;
      }
    }
    .rightContent{
      padding-right: 4vw;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      color: white;
      font-size: 12px;
      >p{
        word-wrap: break-word;
        word-break: break-all;
      }
    }
  }
}
</style>